<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="input-box" @click="openDetails">
			<uni-icon type="search" size="30" class="search" style="color: #8e8e8e"></uni-icon>
			<input type="text" value="" placeholder="输入关键字搜索" class="input"/>
		</view>
		<!-- 轮播图区域 -->
		<view class="casual" v-if="itemList!=''">
			<swiper class="swiper-box" indicator-dots="true" autoplay="true" interval="3000" duration="500">
		
				<swiper-item class="swiper" v-for="(item, index) in itemList" :key="index">
					<image :src="qiniu+item.image_id+'?imageView2/1/w/300/h/300'" class="image" @click="item_click(item.json)"></image>
				</swiper-item>
				
			</swiper>
		</view>
		<!-- 商品分类导航 -->
		<view class="navBox">
			<view class="nav-item" @click="enterBrand" v-for="item in categoryListings" :data-Businessid="item.type_id">
				<image :src="qiniu + item.image_id+'?imageView2/1/w/150/h/150'" mode="" v-if="item.image_id"></image>
				<image src="../../static/Noimg.png" mode="" v-else></image>
				<!-- <text>养生保健</text> -->
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 猜你喜欢版块 -->
		<view class="guess special">
			<!-- 猜你喜欢版块   标题 -->
			<text class="title">猜你喜欢</text>
			<!-- <text class="subTitle+">小仙女最爱的美妆好物</text> -->
			<!-- 猜你喜欢版块   内容-->
			<view class="guessGoodsBox">
				<!-- tab选项切换-->
				<view class="topBar">
					<text :class="{active:item_index,normal:!item_index}" @click="current_swiper(0)">热销推荐</text>
					<text :class="{active:!item_index,normal:item_index}" @click="current_swiper(1)">人气新品</text>
				</view>
				<swiper class="swiper" :current="current" style="height: 1100upx;">
                        <swiper-item>
                            <view class="goodsContentBox">
                            	<view class="goods-items" v-for="item in HOTList" @click="datail(item.id)">
                            		<image :src="qiniu + item.image_id+'?imageView2/1/w/106/h/80'" ></image>
                            		<view class="des-box">
                            			<text class="goods-name ov2">{{item.info}}</text>
                            			<view class="price">
                            				<text class="now-price" v-if="item.price_min!=item.price_max">￥{{item.price_min/100}}{{symbol}}{{item.price_max/100}}</text>
                            				<text class="now-price" v-else>￥{{item.price_min/100}}</text>
                            				<!-- <text class="pre-price">￥195</text> -->
                            			</view>
                            			<view class="addShoppingCar">
                            				<text>加入购物车</text>
                            			</view>
                            		</view>
                            	</view>
                            </view>
                        </swiper-item>
                        <swiper-item>
                            <view class="goodsContentBox">
                            	<view class="goods-items" v-for="item in NEWList" @click="datail(item.id)">
                            		<image :src="qiniu + item.image_id+'?imageView2/1/w/160'" mode=""></image>
                            		<view class="des-box">
                            			<text class="goods-name ov2">{{item.info}}</text>
                            			<view class="price">
                            				<text class="now-price" v-if="item.price_min!=item.price_max">￥{{item.price_min/100}}{{symbol}}{{item.price_max/100}}</text>
                            				<text class="now-price" v-else>￥{{item.price_min/100}}</text>
                            				<!-- <text class="pre-price">￥195</text> -->
                            			</view>
                            			<view class="addShoppingCar">
                            				<text>加入购物车</text>
                            			</view>
                            		</view>
                            	</view>
                            </view>
                        </swiper-item>
                        
                    </swiper>
				<!-- 商品信息框 -->
				
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import eonfox from "@/components/eonfox/eonfox.js"
	import fns from '@/components/eonfox/fns.js';
	var ef = new eonfox();
	export default {
		data() {
			return {
				current:0,
				itemList: [],
				categoryListings:[],
				qiniu:'',
				flid:'',
				item_index:true,
				HOTList:[],
				NEWList:[],
				symbol:'~',
			};
		},
		onLoad:function(e){
			
			uni.setNavigationBarTitle({
				title:e.name+'频道'
			})
			        console.log('传过来的值',e)
					var _this=this;
				ef.submit({
				request:{
				images:['APPLICATIONSLIDESHOW',[{module:"shop_goods_type",label:e.flid}]],
				s:['APPLICATIONTYPEOPTION',[{module:"shop_goods_type", parent_id:e.flid}]],// 获取第二级分类列表
				config:['APPLICATIONCONFIG'],//获取七牛云地址
				lb:['SHOPGOODSLIST',[{size:6,search:{type_id:e.flid}}]]  ,//热销推荐
				new:['SHOPGOODSLIST',[{size:6,"sort":'insert_time_desc',search:{type_id:e.flid}}]],//新品推荐
				},
				callback: function(data){
					console.log('下级分类',data);
					var re=fns.checkError(data,'s',function(errno,error){
						fns.err(error)
					})
					//七牛
					console.log('//七牛',re.config);
					if(re.config && re.config.qiniu_domain){
						_this.qiniu=re.config.qiniu_domain
					}
					if(re.images){
						_this.itemList=re.images
					}
					console.log('打印轮播图',_this.itemList);
					//分类菜单
					console.log('//分类菜单',re.s);
					if(re.s && re.s){
						_this.categoryListings = re.s
					}
					
					//热销推荐
					if(re.lb){
						_this.HOTList=re.lb.data
						console.log('//热销推荐',_this.HOTList);
					}
					if(re.new){
						_this.HOTList=re.lb.data
						_this.NEWList=re.lb.data
						console.log('//人气新品',_this.HOTList);
					}
					
				},
				error: function(err) {
								uni.showToast({
								title:'出错啦',
								icon:'none'
									})
									}
			});
		},
		components: {
			uniIcon,
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			datail(id){
				uni.navigateTo({
					url:'../goodsDetails/goodsDetails?id='+id
				})
			},
			current_swiper(index){
				this.current=index
				if(index==1){
					this.item_index=false
				}else{
					this.item_index=true
				}
			},
			enterDetailsPage() {
				uni.navigateTo({
					url: '../goodsDetails/goodsDetails'
				});
			},
			enterBrand(e) {
				var id=e.currentTarget.dataset.businessid;
				uni.navigateTo({
					url: '../../pagesB/search-result/search-result?id='+id
				});
				console.log(e)
				console.log("第二级分类id",id);
			},
			item_click(json){
				var _this=this
				if(json){
					console.log('轮播图参数',json);
					
					var str=JSON.parse(json)
					console.log('轮播图参数',str);
					switch (str['类型']){
						case '购物商城商品详情':
							_this.item_goods(str['商品ID'])
							break;
						case '内容管理文章详情':
							_this.item_essays(str['文章ID'])
							break;
						default:
							fns.err('该类型参数暂未做处理')
							break;
					}
				}else{
					fns.err('json参数为空')
				}
				
			},
			item_goods(id){
				if(id){
					uni.navigateTo({
						url:'../goodsDetails/goodsDetails?id='+id
					})
				}else{
					fns.err('商品ID未设置')
				}
			},
			item_essays(newsId){
				if(newsId){
					uni.navigateTo({
						url:'../../pagesA/InformationDetails/InformationDetails?newsId='+newsId
					})
				}else{
					fns.err('文章ID未设置')
				}
			},
			//
        }
	}
</script>
	
<style scoped lang="stylus" ref="stylesheet/stylus">
	.content
		width 100%
		
		.title
			width 100%
			height 80upx
			position relative
			display flex
			justify-content center   // 水平居中
			align-items center       
			.back
				width 60upx
				position absolute
				top 10upx
				left 10upx
			.title-word
				display block
				width 100%
				text-align center
			.operateBox
				width 120upx
				position absolute
				top 10upx
				right 5upx
				.redo
					width 50%
		.input-box
			height 100%
			position relative
			margin 10upx 10upx
			background-color #f4f3f3
			border-radius 10upx
			flex 3
			.search
				display inline-block
				position absolute
				top 5upx
				left 0upx
			.input
				display inline-block
				font-size 28upx
				text-align left
				margin-left 50upx
		.casual
			width 100%
			height 400upx
			.swiper-box
				width 100%
				height 100%
				.swiper
					width 100%
					height 100%
					.image
						width 100%
						height 100%
		.navBox
			width 100%
			margin 0 auto
			display block
			justify-content center   // 水平居中
			align-items center       // 垂直居中
			flex-direction row
			
			.nav-item
				float left
				width 20%
				height 100%
				margin 5px 0
				text-align center
				image
					width 100upx
					height 100upx
					margin 0 auto
					border-radius 50%
					// background-color lightblue
					display block
				text
					font-size 24upx
					color #333
		.goodgoods
			width 100%
			.title
				margin-top 20upx
				font-size 40upx
				font-weight 600
				color #333
				letter-spacing 8upx
			.subTitle
				display block
				font-size 24upx
				color #ccc
				text-align center
				margin-bottom 38upx
			.recomend-goods-item2
				display inline-block
				width 22%
				height 240upx
				margin 20upx 10upx
				.img-box
					width 100%
					height 50%
					display flex
					justify-content center
					align-items center
					image
						width 150upx
						height 150upx
				.des
					display block
					font-size 28upx
					margin 30upx 0 5upx
					color #666
				.price
					font-size 32upx
					color red
			.getMoreGoods
				width 100%
				height 220upx
				display flex
				justify-content center
				align-items center  
				.button
					width 35%
					height 80upx
					margin 0 auto
					border-radius 40upx
					font-size 24upx
					letter-spacing 4upx
					border 1px solid #ccc
					display flex
					justify-content center
					align-items center 
		.special
			margin-top 40upx
		.guess
			width 100%
			.title
				margin-top 40upx
				font-size 40upx
				font-weight 600
				color #333
				letter-spacing 8upx
			.subTitle
				display block
				font-size 24upx
				color #ccc
				text-align center
				margin-bottom 38upx
			.guessGoodsBox
				width 100%
				height 100%
				.topBar
					width 100%
					height 78upx
					background-color #ccc
					text
						display inline-block
						text-align center
						line-height 78upx
						width 50%
						height 100%
					.active
						background-color #e44545
						color #fff
					.normal
						background-color #e49a9a
				.goodsContentBox
					width 100%
					height 1100upx
					display flex
					// justify-content center   // 水平居中
					// align-items center       // 垂直居中
					// flex-direction column
					flex-wrap wrap
					background-color #f4f3f3
					padding-top 5px
					.goods-items
						width 32%
						height 520upx
						margin-bottom 10upx
						background-color #fff
// 						margin-left 5upx
// 						margin-right 5upx
						image
							width 80%
							height 35%
							margin 10%
						.des-box
							width 100%
							height 60%
							display flex
							justify-content center
							align-items center 
							flex-direction column
							flex-wrap wrap
							font-size 24upx
							border-top 1px solid #f4f3f3
							.goods-name
								width 95%
								height 72upx
								padding-top 6upx
								overflow hidden
							.price
								width 95%
								margin-top 10upx
								.now-price
									color red
									font-weight 600
									margin-right 20upx
								.pre-price
									color #ccc
									text-decoration line-through
							.addShoppingCar
								width 95%
								height 25%
								background-color #e44545
								display flex
								justify-content center
								align-items center 
								border-radius 10upx
								margin-top 30upx
								color #fff
					
</style>
